<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>推荐产品</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" href="css/mui.min.css">
		<style type="text/css">
			.mui-table-view .mui-media-object {
				display: block;
				max-width: 100px!important;
				height: 100px;
			}
			
			.mui-table-view .mui-media-body {
				position: relative;
				font-size: 1.1rem;
				color: #4a4a4a;
			}
			
			.mui-table-view .mui-media-body strong {
				display: block;
				font-size: 1.35rem;
				padding: .35rem 0;
				color: #4a4a4a;
			}
			
			.mui-table-view .mui-media-body p {
				color: #b7b7be;
			}
			
			.mui-table-view .mui-media-body .sale-product {
				position: absolute;
				right: 10px;
				top: 50%;
				-webkit-transform: translateY(-50%);
			}
			
			.mui-btn-blue,
			.mui-btn-primary,
			input[type=submit] {
				border: 1px solid #54c7fc;
				background-color: #54c7fc;
				border-bottom: 3px solid #009be2;
				font-size:1rem;

			}
		</style>
	</head>

	<body>
		<ul class="mui-table-view">
			<li class="mui-table-view-cell mui-media">
				<img class="mui-media-object mui-pull-left" src="img/3.jpg">
				<div class="mui-media-body">
					移动通用流量1GB
					<div class='mui-ellipsis'>
						<strong>￥30.00</strong>
						<p>月销量:789</p>
						<p>购买此产品，即可获的3个积分</p>

						<a href="" class="sale-product mui-btn mui-btn-primary">购买</a>
					</div>
				</div>
			</li>
			<li class="mui-table-view-cell mui-media">
				<img class="mui-media-object mui-pull-left" src="img/3.jpg">
				<div class="mui-media-body">
					移动通用流量1GB
					<div class='mui-ellipsis'>
						<strong>￥30.00</strong>
						<p>月销量:789</p>
						<p>购买此产品，即可获的3个积分</p>

						<a href="" class="sale-product mui-btn mui-btn-primary">购买</a>
					</div>
				</div>
			</li>
			<li class="mui-table-view-cell mui-media">
				<img class="mui-media-object mui-pull-left" src="img/3.jpg">
				<div class="mui-media-body">
					移动通用流量1GB
					<div class='mui-ellipsis'>
						<strong>￥30.00</strong>
						<p>月销量:789</p>
						<p>购买此产品，即可获的3个积分</p>

						<a href="" class="sale-product mui-btn mui-btn-primary">购买</a>
					</div>
				</div>
			</li>
		</ul>
	</body>

</html>